import React, { Component, Fragment, createRef } from 'react';
import { Menu, Icon } from 'antd';
import Style from './index.module.scss';
import { SelectParam } from 'antd/lib/menu';
import { withRouter, RouteComponentProps } from 'react-router-dom'
import { connect } from 'react-redux'
import { StoreType } from '../../../../store/types'
import Feedback, { FeedbackRefInterface } from '../../../../components/feedback'

interface StateInterface {
}

interface StorePropsInterface {
  isLogin: boolean,
  userIcon: string,
  navIndex: string
}

interface ComPropsInterface extends RouteComponentProps {

}

interface PropsInterface extends ComPropsInterface, StorePropsInterface {

}

class WebComHeader extends Component<PropsInterface, StateInterface> {

  feedbackRef = createRef<FeedbackRefInterface>()

  constructor(props: PropsInterface) {
    super(props)
    this.menuSelect = this.menuSelect.bind(this)
  }

  /**
   * 导航选中后调用
   * @param item
   */
  menuSelect(item: SelectParam) {
    switch (item.key) {
      case '0':
        this.props.history.push('/')
        return
      case '1':
        this.props.history.push('/web/me')
        return
      case '2':
        this.props.history.push('/web/study')
        return
      case '3':
        this.props.history.push('/web/product')
        return
      case '4':
        this.props.history.push('/web/package')
        return
      case '5':
        this.props.history.push('/web/feedback')
        return
      case '6':
        this.props.history.push('/web/tool')
        return
      case '7':
        this.props.history.push(this.props.isLogin ? '/admin' : '/login')
        return
      case '8':
        this.feedbackRef.current!.show()
        return
    }
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return (
      <Fragment>
        <Menu
          theme="dark"
          mode="horizontal"
          selectedKeys={[this.props.navIndex]}
          onSelect={this.menuSelect}
          style={{ lineHeight: '64px' }}
        >
          <Menu.Item key="0">首页</Menu.Item>
          <Menu.Item key="1">个人介绍</Menu.Item>
          <Menu.Item key="2">学习</Menu.Item>
          <Menu.Item key="3">作品</Menu.Item>
          <Menu.Item key="4">封装</Menu.Item>
          <Menu.Item key="5">意见建议</Menu.Item>
          <Menu.Item key="6">工具</Menu.Item>
          <Menu.Item className={'w-float-right'} key="7">
            {
              this.props.isLogin ?
                <span className={`${Style['user-icon']} w-image-fit`} style={{ backgroundImage: `url(${this.props.userIcon})` }}></span> :
                <Icon type="user" style={{ fontSize: '20px' }} />
            }
          </Menu.Item>
          <Menu.Item key="8" className={'w-float-right'}>
            <Icon style={{ fontSize: '20px' }} type="question-circle" />
          </Menu.Item>
        </Menu>
        <Feedback wrappedComponentRef={ this.feedbackRef }></Feedback>
      </Fragment>
    );
  }
}

const mapStateToProps = function (state: StoreType) {
  return {
    isLogin: state.auth.user ? true : false,
    userIcon: state.auth.icon,
    navIndex: state.app.webNavIndex
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {}
}

const classModel = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  {
    forwardRef: true
  }
)(WebComHeader)
export default withRouter<ComPropsInterface>(classModel)
